<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 头部 -->
    <div th:fragment="top" class="header">
      <div class="site-topbar">
        <div class="container w clearfix">
          <!-- 头部导航 -->
          <div class="topbar-nav fl">
            <a href="/">小米商城</a>
            <span>|</span>
            <a href="#">MIUI</a>
            <span>|</span>
            <a href="#">IoT</a>
            <span>|</span>
            <a href="#">云服务</a>
            <span>|</span>
            <a href="#"> 天星数科</a>
            <span>|</span>
            <a href="#">有品</a>
            <span>|</span>
            <a href="#">小爱开放平台</a>
            <span>|</span>
            <a href="#">企业团购</a>
            <span>|</span>
            <a href="#">资质证照</a>
            <span>|</span>
            <a href="#">协议规则</a>
            <span>|</span>
            <a href="/" id="j-app" class="topbar-download">
              下载app
              <div class="appcode">
                <img src="/images/download.png" alt="小米商城" width="90" height="90">
                小米商城app
              </div>
            </a>
            <span>|</span>
            <a href="#">智能生活</a>
            <span>|</span>
            <a href="#">Select Location</a>
          </div>
          <div class="site-shop fr">
            <a href="/page/cart/list" class="cart">
              <em class="iconfont">&#xe61c;</em>购物车
              <span class="J-sp"> (0) </span>
            </a>
            <div class="j-menu">
              购物车中还没有商品，赶紧选购吧！
            </div>
          </div>
          <div class="topbar-info fr">
            <th:block th:if="${session.user!=null}">
              <a href="javascript:void(0)" th:text="${session.user.name}"></a>
              <a href="javascript:void(0)" onclick="logout()">退出</a>
            </th:block>
            <th:block th:if="${session.user==null}">
              <a href="/page/login?returnURI=/">登录</a>
              <span>|</span>
              <a href="/page/register">注册</a>
              <span>|</span>
            </th:block>
            <span class="site-info-span">
                          <a href="#">消息通知</a>
                      </span>
          </div>
        </div>
      </div>
      <div class="site-header">
        <div class="container w clearfix">
          <!-- logo -->
          <div class="head-logo fl">
            <a href="/" class="logo text">
              小米官网
            </a>
          </div>
          <!-- nav -->
          <div class="header-nav fl">
            <ul class="nav-list">
              <li class="nav-category">
                <a href="#" id="header-title" class="header-title">全部商品分类</a>
                <div class="site-category" style="display: none">
                  <ul id="categoryListId" class="cat-ul">
                    <!-- <li  class="category-list">
                         <a href="#" class="cat-title">
                             手机 电话卡
                             <em class="cat-icon iconfont">&#xe638;</em>
                         </a>
                         &lt;!&ndash; js &ndash;&gt;
                         <div class="commodity clearfix">
                             <ul class="com-ul">
                                 <li class="com-li">
                                     <a href="#" class="link clearfix">
                                         <img src="/images/01-1.webp" alt="" width="40" height="40">
                                         <span class="text">小米 11</span>
                                     </a>
                                 </li>
                             </ul>
                         </div>
                     </li>-->

                  </ul>
                </div>
              </li>
              <li class="nav-item">
                <a href="#" class="link">
                  <span class="text">小米手机</span>
                </a>
                <!-- nav - js -->
                <div class="header-nav-menu">
                  <div class="container w">
                    <ul>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure figure-none">
                            <img src="/images/1-01.webp" alt="小米11" width="160" height="110">
                          </div>
                          <div class="title">小米11</div>
                          <p>3999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/1-02.webp" alt="小米10至尊纪念版" width="160" height="110">
                          </div>
                          <div class="title">小米10至尊纪念版</div>
                          <p>5299元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/1-03.webp" alt="小米10" width="160" height="110">
                          </div>
                          <div class="title">小米10</div>
                          <p>3399元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/1-04.webp" alt="小米10 青春版 5G" width="160" height="110">
                          </div>
                          <div class="title">小米10 青春版 5G</div>
                          <p>1999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <a href="#">
                          <div class="figure">
                            <img src="/images/1-05.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
              <li class="nav-item">
                <a href="#" class="link">
                  <span class="text">Redmi 红米</span>
                </a>
                <!-- nav - js -->
                <div class="header-nav-menu">
                  <div class="container w">
                    <ul>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure figure-none">
                            <img src="/images/2-01.webp" alt="小米11" width="160" height="110">
                          </div>
                          <div class="title">小米11</div>
                          <p>3999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/2-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                          </div>
                          <div class="title">小米10至尊纪念版</div>
                          <p>5299元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/2-01.webp" alt="小米10" width="160" height="110">
                          </div>
                          <div class="title">小米10</div>
                          <p>3399元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/2-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                          </div>
                          <div class="title">小米10 青春版 5G</div>
                          <p>1999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/2-01.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <a href="#">
                          <div class="figure">
                            <img src="/images/2-01.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
              <li class="nav-item">
                <a href="#" class="link">
                  <span class="text">电视</span>
                </a>
                <!-- nav - js -->
                <div class="header-nav-menu">
                  <div class="container w">
                    <ul>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure figure-none">
                            <img src="/images/3-01.webp" alt="小米11" width="160" height="110">
                          </div>
                          <div class="title">小米11</div>
                          <p>3999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/3-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                          </div>
                          <div class="title">小米10至尊纪念版</div>
                          <p>5299元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/3-01.webp" alt="小米10" width="160" height="110">
                          </div>
                          <div class="title">小米10</div>
                          <p>3399元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/3-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                          </div>
                          <div class="title">小米10 青春版 5G</div>
                          <p>1999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/3-01.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <a href="#">
                          <div class="figure">
                            <img src="/images/3-01.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
              <li class="nav-item">
                <a href="#" class="link">
                  <span class="text">笔记本</span>
                </a>
                <!-- nav - js -->
                <div class="header-nav-menu">
                  <div class="container w">
                    <ul>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure figure-none">
                            <img src="/images/4-01.webp" alt="小米11" width="160" height="110">
                          </div>
                          <div class="title">小米11</div>
                          <p>3999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/4-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                          </div>
                          <div class="title">小米10至尊纪念版</div>
                          <p>5299元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/4-01.webp" alt="小米10" width="160" height="110">
                          </div>
                          <div class="title">小米10</div>
                          <p>3399元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/4-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                          </div>
                          <div class="title">小米10 青春版 5G</div>
                          <p>1999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/4-01.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <a href="#">
                          <div class="figure">
                            <img src="/images/4-01.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
              <li class="nav-item">
                <a href="#" class="link">
                  <span class="text">家电</span>
                </a>
                <!-- nav - js -->
                <div class="header-nav-menu">
                  <div class="container w">
                    <ul>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure figure-none">
                            <img src="/images/5-01.webp" alt="小米11" width="160" height="110">
                          </div>
                          <div class="title">小米11</div>
                          <p>3999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/5-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                          </div>
                          <div class="title">小米10至尊纪念版</div>
                          <p>5299元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/5-01.webp" alt="小米10" width="160" height="110">
                          </div>
                          <div class="title">小米10</div>
                          <p>3399元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/5-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                          </div>
                          <div class="title">小米10 青春版 5G</div>
                          <p>1999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/5-01.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <a href="#">
                          <div class="figure">
                            <img src="/images/5-01.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
              <li class="nav-item">
                <a href="#" class="link">
                  <span class="text">路由器</span>
                </a>
                <!-- nav - js -->
                <div class="header-nav-menu">
                  <div class="container w">
                    <ul>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure figure-none">
                            <img src="/images/6-01.webp" alt="小米11" width="160" height="110">
                          </div>
                          <div class="title">小米11</div>
                          <p>3999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/6-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                          </div>
                          <div class="title">小米10至尊纪念版</div>
                          <p>5299元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/6-01.webp" alt="小米10" width="160" height="110">
                          </div>
                          <div class="title">小米10</div>
                          <p>3399元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/6-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                          </div>
                          <div class="title">小米10 青春版 5G</div>
                          <p>1999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/6-01.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <a href="#">
                          <div class="figure">
                            <img src="/images/6-01.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
              <li class="nav-item">
                <a href="#" class="link">
                  <span class="text">智能硬件</span>
                </a>
                <!-- nav - js -->
                <div class="header-nav-menu">
                  <div class="container w">
                    <ul>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure figure-none">
                            <img src="/images/7-01.webp" alt="小米11" width="160" height="110">
                          </div>
                          <div class="title">小米11</div>
                          <p>3999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/7-01.webp" alt="小米10至尊纪念版" width="160" height="110">
                          </div>
                          <div class="title">小米10至尊纪念版</div>
                          <p>5299元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/7-01.webp" alt="小米10" width="160" height="110">
                          </div>
                          <div class="title">小米10</div>
                          <p>3399元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <em></em>
                        <a href="#">
                          <div class="figure">
                            <img src="/images/7-01.webp" alt="小米10 青春版 5G" width="160" height="110">
                          </div>
                          <div class="title">小米10 青春版 5G</div>
                          <p>1999元起</p>
                        </a>
                      </li>
                      <li class="menu-nav">
                        <a href="#">
                          <div class="figure">
                            <img src="/images/7-01.webp" alt="小米MIX Alpha" width="160" height="110">
                          </div>
                          <div class="title">小米MIX Alpha</div>
                          <p>19999元起</p>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
              <li>
                <a href="#" class="link">
                  <span class="text">服务</span>
                </a>
              </li>
              <li>
                <a href="#" class="link">
                  <span class="text">社区</span>
                </a>
              </li>
            </ul>
          </div>
          <!-- 搜索框 -->
          <div class="header-search fr">
            <form action="/page/product/list" method="GET" class="search-form">
              <input type="text" name="name" class="search-text" placeholder="小米11">
              <input type="submit" class="search-btn iconfont" value="&#xe652;">
            </form>
          </div>
        </div>
      </div>
      <script>
        function logout() {
            $.post(
               '/user/logout',
               function (result) {
                   if (result.code == 0) {
                       mylayer.okUrl(result.msg, '/page/login?returnURI=/');
                   }
               },
               'json'
            );
        }
      </script>
    </div>
</body>
</html>